项目瘦身：拆分 Electron、CDN 等功能模块
概述
项目瘦身的核心是对模板项目做减法，将 Electron、CDN、PWA 等功能模块从基础项目中拆分出来，形成独立的模板片段。这为后续的 CLI 工具按需组装项目提供结构化的模板源。
拆分策略
目录重组
拆分前（单一项目）:
admin-template/
├── build/ # 构建配置
├── electron/ # Electron 主进程
├── resources/ # Electron 资源
├── src/
├── vite.config.ts # 包含所有功能插件的配置
└── package.json # 包含所有功能依赖
拆分后（模板目录）:
templates/
└── base/ # 基础项目骨架
├── src/
├── vite.config.ts # 精简后的基础配置
└── package.json # 仅基础依赖
text
功能模块识别
需要从基础项目中拆出的模块：
| 模块 | 涉及文件/目录 | 说明 |
|---|---|---|
| Electron | electron/、build/resources/、src/main/ | 桌面端主进程与预加载脚本 |
| CDN | vite.config.ts 中的 CDN 插件配置 | 外部化依赖（如 Vue、Element Plus） |
| PWA | vite.config.ts 中的 PWA 插件 | 离线缓存与 Service Worker |
| Mock | vite.config.ts 中的 mock 插件 | 开发环境的接口模拟 |
拆分步骤
1. 创建模板目录结构
mkdir -p templates/base
# 将全部项目文件移入 base
mv admin-template/* templates/base/
bash
2. 移除 Electron 相关代码
# 在 base 模板中删除 Electron 相关文件
rm -rf templates/base/electron/
rm -rf templates/base/build/resources/
bash
3. 清理 package.json
// templates/base/package.json（精简后）
{
"dependencies": {
"vue": "^3.4.0",
"vue-router": "^4.3.0",
"pinia": "^2.1.0"
// 移除 electron、electron-builder 等依赖
},
"devDependencies": {
"vite": "^5.4.0",
"@vitejs/plugin-vue": "^5.0.0"
// 移除 vite-plugin-electron 等
}
}
json
4. 精简 vite.config.ts
// templates/base/vite.config.ts（精简后）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
export default defineConfig({
plugins: [
vue(),
UnoCSS(),
// 移除 electron、cdn、pwa、mock 等插件
],
})
typescript
5. 清理 src/main.ts
// 移除 Electron 相关的条件判断
// 移除 CDN 动态加载逻辑
// 保留基础的 Vue 应用初始化
typescript
环境变量隔离
使用环境变量判断当前运行模式，条件加载插件：
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '')
const isElectron = env.ELECTRON === 'true'
const conditionalPlugins = isElectron
? [] // Electron 模式不需要 CDN
: [
// CDN 插件
// PWA 插件
]
return {
plugins: [
vue(),
...conditionalPlugins,
],
}
})
typescript
Git 与模板管理
虽然可以用 git reset 回退到拆分前的状态，但使用独立模板目录的目的是：
- 为 CLI 工具提供结构化的模板源
- 每个模板片段可独立维护和版本化
- 不同功能模块可以自由组合
实践要点
- 拆分时确保
base模板仍可独立运行（pnpm dev/pnpm build） package.json中的 scripts 也需精简，移除 electron 相关的构建命令- 拆分后重新启动项目，检查控制台是否有报错
App.vue中可能有 Electron 相关的条件渲染，需一并清理- 模板片段的文件结构应保持与
create-vue类似的组织方式
↑